<!-- 历史热门组件 -->
<template>
  <div class="history-hot">
    <!-- 历史记录 -->
    <div class="his-hot" v-if="isShowHistory">
      <div class="hd">
        <h4>历史记录</h4>
        <van-icon name="delete" @click="clearFn" />
      </div>
      <div class="bd">
        <van-tag v-for="(item, index) in searchHistoryData" @click="goSearch(item)" :key="index" plain type="default">{{
            item
        }}</van-tag>
      </div>
    </div>
    <!-- 热门搜索 -->
    <div class="his-hot">
      <div class="hd">
        <h4>热门搜索</h4>
      </div>
      <div class="bd">
        <van-tag v-for="(item, index) in searchHotData" :key="index" @click="goSearch(item.keyword)" plain
          :type="item.is_hot ? 'danger' : 'default'">{{ item.keyword }}</van-tag>
      </div>
    </div>
  </div>
</template>
  
<script>
//引入删除历史记录
import Vue from "vue";
import { Tag } from "vant";
import { Icon } from "vant";
import { Toast } from "vant";

Vue.use(Toast);
Vue.use(Icon);
Vue.use(Tag);
import { qlishiData } from "@/api/dellishi";
// import { sskdata } from "@/api/sskdata";
export default {
  data() {
    return {
      isShowHistory: true, // 是否展示历史记录
      // searchHistoryData: [],
    };
  },
  //搜索历史记录数组=>  父传子searchHotData
  props: ["searchHistoryData", "searchHotData"],

  methods: {
    clearFn() {
      // 清除历史记录
      qlishiData().then((res) => {
        console.log("删除", res);
        // this.searchHistoryData = "";
        if (res.errno == 0) {
          // 提示删除成功
          this.$toast.success("删除成功");
          // 隐藏历史记录
          this.isShowHistory = false;
        }
      });
    },
    goSearch(m) {
      //点击历史标签进行搜索
      // m 为关键字 子传父 传到父组件 ***.vue
      this.$emit("goSearch", m);
    },
  },
};
</script>
<style lang='less' scoped>
/* @import url(); 引入css类 */
.history-hot {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);

  .his-hot {
    background-color: #fff;
    padding: 2%;

    .hd {
      padding-top: 2%;
      display: flex;
      justify-content: space-between;
    }

    .bd {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;

      .van-tag {
        padding: 3px;
        margin: 0 2px;
      }
    }
  }
}
</style>